﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link href="static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="static/h-ui.admin/css/H-ui.login02.css" rel="stylesheet" type="text/css"/>
    <link href="static/h-ui.admin/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" type="text/css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>后台登录 - H-ui.admin v3.0</title>
    <meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description"
          content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<input type="hidden" id="TenantId" name="TenantId" value=""/>
<div class="header"></div>
<div class="loginWraper">
    <div id="loginform" class="loginBox">
        <form class="form form-horizontal" id="users-login-form">
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                <div class="formControls col-xs-8">
                    <input id="username" name="username" type="text" placeholder="账户" class="input-text size-L">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                <div class="formControls col-xs-8">
                    <input id="password" name="password" type="password" placeholder="密码" class="input-text size-L">
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <input class="input-text size-L" type="text" id="randomCode" placeholder="验证码"
                           onblur="if(this.value==''){this.value='验证码:'}"
                           onclick="if(this.value=='验证码:'){this.value='';}" value="验证码:" style="width:120px;">
                    <img src="./static/h-ui.admin/images/randomCode.jpg" id="randomCodeImage" style="width: 120px"> <a id="kanbuq"
                                                                                                href="#">看不清楚换一张</a>
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <label for="rememberme">
                        <input type="checkbox" name="online" id="rememberme" checked>
                        使我保持登录状态</label>
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <input name="" type="button" onclick="doLogin()" class="btn btn-success radius size-L"
                           value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
                    <input name="" type="reset" class="btn btn-default radius size-L"
                           value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
                </div>
            </div>
        </form>
    </div>
</div>
<div class="footer"> &copy; 华清远见 2017-2023 &nbsp;&nbsp; 作者: 西蒙牛 v1.0</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer /作为公共模版分离出去-->


<!--添加自定义的组件-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/crypto-js/4.1.1/crypto-js.min.js"></script>
<script src="js/util/encrypt.js"></script>
<script src="js/util/outils.min.js"></script>
<script src="js/api/baseUrl.js"></script>
<script src="js/auth.js"></script>
<script src="js/api/users.js"></script>

<!--引入前端nanoid令牌生成工具类库-->
<script type="module">

    //先检查一下当前用户是否已经登录
    await authLoginStatus().then(resp=>{
        console.log("----------服务器返回的登录状态-----------")
        //console.log(resp);
        if(resp){
            //说明当前用户没有登录、
            window.location.href='index.html';
        }
    })


    //由于它是一个js的模块，必须写在一个带module的javascript脚本里面
    import {nanoid} from "./js/util/nanoid.js";

    let token = '';
    token =await nanoid(16); //生成一个长度为16位的令牌
    window.sessionStorage.setItem("client-token", token);

    refreshRandomCodeImg();
</script>
<!--此乃百度统计代码，请自行删除-->
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?080836300300be57b7f34f4b3e97d911";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);

        //初始化图形验证码
        //refreshRandomCodeImg();
    })();

    if($("#rememberme").prop("checked")){
        if(outils.getCookie("sust.hiveproject.username")){
            $("#username").val(decrypt(outils.getCookie("sust.hiveproject.username"))) ;
            $("#password").val(decrypt(outils.getCookie("sust.hiveproject.password")));
        }
    }

    //动态更新图形验证码
    function refreshRandomCodeImg(){
        let token = sessionStorage.getItem("client-token");
        console.log("----------客户端生成的令牌是-----------");
        console.log(token);

        $("#randomCodeImage").prop("src",baseUrl+"/commons/randomcode?token="+token+"&tm="+new Date().getTime())
    }

    function doLogin(){
        //console.log("执行用户登录...");
        let username = $("#username").val();
        let password = $("#password").val();
        let token = sessionStorage.getItem("client-token");
        let code = $("#randomCode").val();
        //console.log("username=>"+username+",password=>"+password);
        login(username,password,token,code).then(resp=>{
            if(resp.code === 200){

                //服务器给你返回登录成功的用户信息，这个用户信息里面包含了tokenName,tokenValue
                console.log("-------登录成功，用户信息如下---------")
                console.log(resp.data); //仔细观察里面有没有会员卡的名字，卡号。
                console.log(resp.data.tokenName);
                console.log(resp.data.tokenValue);

                //把会员卡号保存到cookie中。怎么存。
                outils.setCookie("sust.token-name",resp.data.tokenName,100); //默认保存100天
                outils.setCookie("sust.token-value",resp.data.tokenValue,100);
                resp.data.tokenName="";
                resp.data.tokenValue="";

                //判断用户是否希望记住我。
                if($("#rememberme").prop("checked")){
                    console.log("记住我...");
                    const encryptUsername = encrypt(username);
                    const encryptPassword = encrypt(password);
                    //把加密后的密码保存浏览器的cookie中
                    outils.setCookie("sust.hiveproject.username",encryptUsername,100); //默认保存100天
                    outils.setCookie("sust.hiveproject.password",encryptPassword,100);
                }else{
                    console.log("忘记我....")
                    outils.removeCookie("sust.hiveproject.username"); //默认保存100天
                    outils.removeCookie("sust.hiveproject.password");
                }

                localStorage.setItem("sust.currentLoginUserInfo",JSON.stringify(resp.data));

                //开启一个定时器，1秒钟之后跳转到后台管理的首页
                //说明登录成功
                setTimeout(window.location.href="index.html",1000);


            }else{
                layer.msg(resp.msg,{icon:2,time:1000});
            }
        })

    }
</script>
<!--/此乃百度统计代码，请自行删除
</body>
</html>